<template>
  <div>
    <CommonCard :title="'累计订单量'" :value="'33,223,234'">
      <template>
        <div
          id="total-orders-chart"
          :style="{ width: '100%', height: '100%' }"
        />
      </template>
      <template v-slot:footer>
        <span>昨日订单量 </span>
        <span class="emphasis">20,000,000</span>
      </template>
    </CommonCard>
  </div>
</template>

<script>
import commonCardMixin from '../../mixins/commonCardMinxin'

export default {
  mixins: [commonCardMixin],
  mounted () {
    const chartDom = document.getElementById('total-orders-chart')
    const chart = this.$echarts.init(chartDom)
    chart.setOption({
      xAxis: {
        type: 'category',
        show: false,
        boundaryGap: false
      },
      yAxis: {
        show: false
      },
      series: [{
        type: 'line',
        data: [420, 432, 220, 534, 490, 430, 220, 320, 532],
        areaStyle: {
          color: 'red'
        },
        lineStyle: {
          width: 0
        },
        itemStyle: {
          opacity: 0
        },
        smooth: true
      }],
      grid: {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
      }
    })
  }
}
</script>

<style lang="" scoped>
</style>
